/*
JavaScript:简称JS,是一门弱类型的脚本语言(嵌入到html页面中，或者基于v8引擎)；
js一般作为客户端语言，是一门直译型语言

java:
int i = 10;
i = 3.14; //报错

*.java---> *.class

js:
var i = 10;
i = "3.14"
*/
//原生js
// window.onload=function(){
//
// }
//jquery
$(function () {
    //声明音乐服务端接口地址
    const MUSIC_API = 'http://home.softeem.xin:8088/music/listAll'
    //const MUSIC_API = 'http://home.softeem.xin:8088/musiclist/listAll/10'
    //歌曲列表
    var musics = [];
    //初始化当前正在播放的歌曲索引
    var currentIndex = 0;
    //获取音频播放器对象
    var player = $('#player');
    //声明变量表示歌曲的当前播放位置以及总时长（单位：秒）
    var now = 0;
    var total = 0;
    //标记播放器的当前播放状态
    var isPlaying = false;
    //循环状态标记 0-列表  1-随机播放  2-单曲循环
    var loopType = 0;

    //web前端请求服务端技术：Ajax  异步请求
    $.get(MUSIC_API, function (resp) {
        //缓存数据
        musics = resp;
        let html = '';
        //循环遍历
        musics.forEach((e, i) => {
            html += `<li data-index="${i}"><i class="fa fa-music">${e.name}</i></li>`
        })
        //将生成的html代码插入到列表中
        $('.musiclist').html(html);
        //初始化播放源
        player.prop('src',musics[currentIndex].path);
    })

    //事件委派(委托)
    $('.musiclist').on('click', 'li', function () {
        //获取列表项被点击时的data-index属性值
        currentIndex = $(this).data('index');
        //获取需要播放的歌曲对象
        let m = musics[currentIndex];
        //为播放器设置播放地址
        player.prop('src', m.path);
        //开始播放
        startPlay(m);
    })

    //javascript-->Typescript-->ArkTS

    function startPlay(m) {
        //标记播放器处于播放状态
        isPlaying = true;
        //使用定时器，定时监控播放器准备状态
        let flag = setInterval(function(){
            //获取播放器准备状态
            var stat = player.prop('readyState');
            //当播放器完全准备好之后
            if(stat === 4){
                //触发播放器的播放行为
                player.trigger('play');
                //清理定时器
                clearInterval(flag);
            }
        },100)
        //同步显示歌曲名
        $('.music-name').text(m.name);
        //唱片旋转
        $('.cover').addClass('playing');
        //专辑封面同步
        $('#appBg,#coverImg').prop('src', m.ablumImg);
        //播放按钮状态同步
        $('.btn-play').html('<i class="fa fa-pause fa-3x"></i>')
    }

    //当播放器的第一帧数据加载时执行
    player.on('loadeddata', function () {
        //获取播放器的总播放时长
        total = player.prop('duration')
        //将歌曲的播放时长实时同步到指定位置
        $('.time-total').text(fmtTime(total))
    })

    //监听当前播放时间的变化
    player.on('timeupdate',function(){
        //获取播放器的当前播放位置
        now = player.prop('currentTime');
        //实时同步当前播放时间
        $('.time-now').text(fmtTime(now));
        //计算当前播放进度？
        let progress = (now / total * 100) + '%';
        //将进度值作为进度条宽度？
        $('.progress').css('width',progress);
    })

    //对进度条盒子绑定点击事件，控制歌曲播放进度
    $('.progress-box').on('click',function(e){
        //获取进度条宽度
        let w = $(this).width();
        //获取点击位置与左侧的偏移值
        let offset = e.offsetX;
        //计算获取当前跳转的进度比,并与总时长计算获取当前进度位置
        now = offset / w * total;
        //设置播放器的当前播放位置
        player.prop('currentTime',now);
    })

    //监听播放器播放完毕事件
    player.on('ended',function(){
        changeMusic('next');
    })

    //时间格式函数将以秒为单位时间转换为 mm:ss 格式
    function fmtTime(time) {
        //根据提供的毫秒单位时间创建日期对象
        time = new Date(time * 1000)
        //获取分钟
        let m = time.getMinutes();
        let s = time.getSeconds();
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        return `${m}:${s}`;
    }

    //对播放器暂停或继续播放
    function playOrPause(){
        if(isPlaying){
            //暂停
            isPlaying = false;
            //播放器暂停
            player.trigger('pause');
            //停止唱片旋转
            $('.cover').removeClass('playing');
            //按钮同步为播放图标
            $('.btn-play').html('<i class="fa fa-play fa-3x"></i>')
        }else{
            //继续播放
            startPlay(musics[currentIndex]);
        }
    }

    function changeLoopType(){
        //改变循环状态（始终在0~2之间变换）
        loopType = ++loopType % 3;
        let msg = '';
        if(loopType === 0){
            //列表循环
            msg = '列表循环'
            $('.btn-loop').html('<i class="fa fa-list-ol"></i>');
        }else if(loopType === 1){
            //随机
            msg = '随机播放'
            $('.btn-loop').html('<i class="fa fa-random"></i>');
        }else{
            //单曲
            msg = '单曲循环'
            $('.btn-loop').html('<i class="fa fa-circle-o-notch"></i>');
        }
        //显示提示层
        $('#tips').text(msg).fadeIn(function(){
            $(this).fadeOut();
        })
    }

    //切歌（上一曲，下一曲）
    function changeMusic(type,model){
        if(loopType === 0){
            if(type === 'prev'){
                //上一曲
                currentIndex = --currentIndex < 0 ? musics.length-1 : currentIndex;
            }else{
                //下一曲
                currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex;
            }
        }else if(loopType === 1){
            //随机获取歌曲索引
            currentIndex = Math.floor(Math.random() * musics.length);
        }else if(loopType === 2 && model === 'm'){
            if(type === 'prev'){
                //上一曲
                currentIndex = --currentIndex < 0 ? musics.length-1 : currentIndex;
            }else{
                //下一曲
                currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex;
            }
        }
        //获取当前需要播放的歌曲
        let m = musics[currentIndex];
        //修改播放路径
        player.prop('src',m.path);
        //开始播放
        startPlay(m)
    }

    //为所有按钮统一绑定点击事件
    $('button').on('click', function () {
        //获取事件名
        let event = $(this).data('event');
        switch (event) {
            case 'loop':
                changeLoopType();
                break;
            case 'prev':
                changeMusic('prev','m');
                break;
            case 'playOrPause':
                playOrPause();
                break;
            case 'next':
                changeMusic('next','m');
                break;
            case 'list':
                $('#musiclist').fadeIn();
                break;
            case 'close':
                $('#musiclist').fadeOut();
                break;
        }
    })
})
